<script>
import axios from "axios";

export default {
    name: "FilmList",
    data(){
        return {
            films:[]
        }
    },
    mounted(){
        axios.get("https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=3&type=1&k=1338212",{
            headers:{
                "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.2.1","e":"1762673692770985284337665","bc":"110100"}',
                "X-Host": 'mall.film-ticket.film.list'
            }
        }).then(value=>{
            console.log(value.data);
            this.films = value.data.data.films;
        })
    }
}
</script>

<template>
    <div>
        <ul>
            <li v-for="item in films" :key = "item.filmId">
                <router-link :to="'/home/films/'+item.filmId">{{item.name}}</router-link> &nbsp;&nbsp;
                <button @click="$router.push('/home/films/'+item.filmId)">push</button> &nbsp;
                <button @click="$router.replace('/home/films/'+item.filmId)">replace</button>
            </li>
        </ul>
        <button @click="$router.forward()">前进</button>
        <button @click="$router.back()">后退</button>
        <hr/>
        <router-view></router-view>
    </div>
</template>

<style scoped>

</style>